{% extends 'base.html' %}
{% block content %}

    <body>
        <div class="layui-fluid">
            <div class="layui-row">

                <form class="layui-form">
                    <div class="layui-form-item">
                        <label for="title" class="layui-form-label">靶机名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="title" name="title" required="" lay-verify="title" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="hint" class="layui-form-label">靶机描述</label>
                        <div class="layui-input-inline">
                            <textarea id="hint" name="hint" placeholder="CVE编号(漏洞成因)" class="layui-textarea" style="word-wrap:normal;"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="L_p_cate" class="layui-form-label">靶机主类</label>
                        <div class="layui-input-inline">
                            <select name="p_cate" lay-verify="" lay-filter="p_cate">
                                <option value="{{request.form['p_cate'] }}" disabled selected>请选择主类</option>
                                {% for p_c in p_cates %}
                                <option value="{{p_c['fcate_name'] }}">{{p_c['fcate_name']}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="L_s_cate" class="layui-form-label">靶机子类</label>
                        <div class="layui-input-inline">
                            <select name="s_cate" lay-verify=""  >
                                <option value="{{request.form['s_cate']}}" disabled selected>请选择子类</option>
                                <option id="type" ></option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="real_flag" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="add" lay-submit>增加</button>
                    </div>
                </form>

            </div>
        </div>
        <script>
            layui.use(['form', 'layer','laydate'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                laydate = layui.laydate,

                 //下拉菜单二级联动
                    form.on('select(p_cate)',function (data) {
                        //监听到了下拉框选择的选项，传递过来
                        //在控制台输出信息
                        var fcate_name = data.value;
	                    console.log(fcate_name);
	                    //再利用ajax将数据传到后端，来获取到对应下拉框选项而出现的值
                        $.ajax({
                            type:"post",
                            url:"/admin/second_action",
                            data:{"fcate_name":fcate_name},
                            dataType:"json",
                            success:function (d) {
                                //对应的值传回，拼出html下拉框语句
                                console.log(d)
                                var tmp=document.getElementById("type");
                                for (var i in d){
                                    //console.log(d[i])
                                    tmp +='<option value="'+d[i]+'">'+d[i]+'</option>';
                                    console.log(tmp);
                                }
                                $("select[name='s_cate']").append(tmp);
                                form.render('select');

                            },error:function () {
                                layer.alert('请求失败');}
                        });
                        });
                //自定义验证规则
                form.verify({
                    title:[/\S/,'标题不能为空'],
                    link:[/(http|https):\/\/([\w.]+\/?)\S*/,'请输入正确的链接'],
                    pass: [/(.+){6,12}$/, '密码必须6到12位'],
                });

                //监听提交
                form.on('submit(add)',
                function(data) {
                    console.log(data.field);
                    $.post(data.form.action,data.field);
                    //发异步，把数据提交给服务端
                    layer.alert("增加成功", {icon: 6},
                        function() {
                        //关闭当前frame
                        xadmin.close();
                        // 可以对父窗口进行刷新
                        xadmin.father_reload();

                    });
                    return false;

                });

            });
        </script>
    </body>
{% endblock %}